<template>
  <div style="width: 100%;">
    <el-card
      shadow="naver"
      v-for="(item, index) in rejectNodes"
      :key="index"
      style="margin-top: 10px"
      class="reject-card"
    >
      <el-button
        @click="delRejectNode(rejectNodes, index)"
        type="text"
        size="small"
        icon="Close"
        >移除</el-button
      >
      <br />
      <el-select
        size="mini"
        style="width: 100%"
        v-model="item.nodeId"
        placeholder="选择节点"
      >
        <el-option
          :label="rejectNode.name"
          :value="rejectNode.id"
          v-for="rejectNode in nodeList"
          :key="rejectNode.id"
        >
        </el-option>
      </el-select>
      <div>
        <el-button
          @click="addRejectCondition(item)"
          type="text"
          size="small"
          icon="el-icon-plus"
          >添加回退条件</el-button
        >
        <lineCondition :conditions="item.conditions"></lineCondition>
      </div>
    </el-card>
  </div>
</template>

<script>
import lineCondition from "./lineCondition.vue";
export default {
  components: { lineCondition },
  props: {
    rejectNodes: {
      type: Array,
      default: function () {
        return [];
      },
    },
    nodeList: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  methods: {
    delRejectNode(conditions, index) {
      conditions.splice(index, 1);
    },
    addRejectCondition(item) {
      if (!item.conditions) this.$set(item, "conditions", []);
      item.conditions.push({
        conditionId: "",
        conditionName: "",
        parameter: "",
        description: "",
      });
    },
  },
};
</script>

<style>
.reject-card .el-card__body {
  padding: 10px;
}
</style>
